<template>
    <div class="preview-error">
        <el-icon class="error-icon">
            <CircleClose />
        </el-icon>
        <p>{{ message }}</p>
        <p v-if="debugUrl" class="debug-url">尝试访问的URL: {{ debugUrl }}</p>
        <el-button type="primary" @click="$emit('retry')" size="small">重试</el-button>
    </div>
</template>

<script setup>
import { CircleClose } from '@element-plus/icons-vue'

defineProps({
    message: {
        type: String,
        required: true
    },
    debugUrl: {
        type: String,
        default: ''
    }
})

defineEmits(['retry'])
</script>

<style scoped>
.preview-error {
    text-align: center;
    padding: 40px 20px;
    color: #f56c6c;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.error-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.preview-error p {
    margin: 10px 0;
}

.debug-url {
    font-size: 12px;
    color: #999;
    word-break: break-all;
    max-width: 90%;
}
</style>